<template>
    <div id="electron-view" class="window" style="background: none">
        <div class="title" style="background: #14274c;">
            电子地图
            <!-- <i class="el-icon-close"></i> -->
        </div>
        <div class="body">
			
			<div id="electronMap"></div>
			<div class="map-view">
				<div class="" @click="mapEvent('topo-vector')">
					<img src="../assets/images/basemap.png" />
					<div class="map-txt map-txt-bg1" style="background-color: rgba(8,31,55, 0.9)">地形地图</div>
				</div>
				<div @click="mapEvent('satellite')">
					<img src="../assets/images/satellite.png" />
					<div class="map-txt map-txt-bg2">卫星地图</div>
				</div>
			</div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import {loadModules} from 'esri-loader';
	// const urlLink = {url: 'https://js.arcgis.com/4.15/'} 
	var mapElectron
    export default {
        data () {
            return {
				
			}
        },
		mounted() {
			loadModules([
				'esri/Map', 
				'esri/views/MapView',
				"esri/layers/MapImageLayer",
				"esri/Basemap",
			], { css: true, url: 'api/init.js' }).then(([Map,ArcGISMap, MapView,MapImageLayer,Basemap]) => {
			  mapElectron = new ArcGISMap({
				basemap: 'topo-vector'
			  });
			  var basemap = new Basemap({
			      baseLayers: [
			  		new MapImageLayer({
			  		    url: "https://gzcimportal.gzcc.gov.cn/server/rest/services/hpMap/hp_jiezhen/MapServer",
			  		}),
			      ],
			  });
			  mapElectron = new Map({
			      basemap: basemap,
			  });
		
			  this.view = new MapView({
				container: 'electronMap',
				map: mapElectron,
				center: [-118, 34],
				zoom: 8
			  });
			});

			// loadModules([
			// 	"esri/Map",
			// 	'esri/views/MapView',
			// 	'esri/config',
			// 	// "esri/Basemap",
			// ], urlLink ).then(([Map, MapView]) => {
			
			// mapElectron = new Map({
			// 	basemap: 'topo-vector',
			// });
			// var view = new MapView({
			// 	container: "electronMap",
			// 	map: mapElectron,
			// 	scale: 8000,
			// 	center: [113.48067,23.18139],
			// });
			// view.ui.remove('attribution');
			// view.ui.remove('zoom');
			
			
			// map = new Map("electronMap", {
			//   basemap: "streets",
			//   center: [-95.249, 38.954],
			//   zoom: 14,
			//   slider: false,
			//   logo: false,  //不显示Esri的logo
			// });
			
			// esriConfig.defaults.io.proxyUrl = "/proxy";
			// var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("https://augurit.gzcc.gov.cn/server/rest/services/GZmap0304/MapServer");
			//  map.addLayer(myTiledMapServiceLayer);//添加到地图中
			// }, reason => {
			// 	console.log (reason);
			// })
		},
		methods: {
			init(type) {
				
			},
			mapEvent(type) {
				mapElectron.basemap = type
				// this.init(type)
				// this.view.container = null;
			}
			
		},
		beforeDestroy() {
		    if (this.view) {
		        // destroy the map view
		        this.view.container = null;
		    }
		},
    }
</script>
<style lang="less" rel="stylesheet/less">
@import 'https://js.arcgis.com/4.15/esri/themes/light/main.css';
#electron-view {
	#electronMap {
		width: 100%;
		height: 100%;
	}
	.body {
		// position: relative;
		.map-view {
			position: absolute;
			right: 10px*@ratio;
			bottom: 10px*@ratio;
			display: flex;
			
			cursor:pointer;
			img {
				width: 75px*@ratio;
				height: 55px*@ratio;
			}
			.map-txt {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 20px*@ratio;
				background-color: rgba(8,31,55, 0.8);
				font-size: 10px*@ratio;
				text-align: center;
				line-height: 20px*@ratio;;
				color: #FFFFFF;
			}
		}
		.map-view>:nth-child(1){
			margin: 0 10px*@ratio;
		}
		.map-view>:nth-child(1), .map-view>:nth-child(2) {
			position: relative;
			width: 75px*@ratio;
			height: 55px*@ratio;
		}
	}
}


</style>
